<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>票新增</span>
            </div>
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="种类" :label-width="formLabelWidth" prop="ticket_zl">
                    <el-input v-model="form.ticket_zl" autocomplete="off" placeholder="票种类"></el-input>
                </el-form-item>
                <el-form-item label="起点" :label-width="formLabelWidth" prop="ticket_start">
                    <el-input v-model="form.ticket_start" autocomplete="off" placeholder="票起点"></el-input>
                </el-form-item>
                <el-form-item label="终点" :label-width="formLabelWidth" prop="ticket_end">
                    <el-input v-model="form.ticket_end" autocomplete="off" placeholder="票终点"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" :label-width="formLabelWidth" prop="ticket_starttime">
                    <el-input v-model="form.ticket_starttime" autocomplete="off" placeholder="开始时间"></el-input>
                </el-form-item>
                <el-form-item label="到达时间" :label-width="formLabelWidth" prop="ticket_endtime">
                    <el-input v-model="form.ticket_endtime" autocomplete="off" placeholder="到达时间"></el-input>
                </el-form-item>
                <el-form-item label="票价" :label-width="formLabelWidth" prop="ticket_money">
                    <el-input v-model="form.ticket_money" autocomplete="off" placeholder="票价"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth" prop="ticket_number">
                    <el-input v-model="form.ticket_number" autocomplete="off" placeholder="数量"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import api from '@/api'
export default {
    data() {
        return {
            form: {
                ticket_zl: "",
                ticket_start: "",
                ticket_end: "",
                ticket_starttime: "",
                ticket_endtime: "",
                ticket_money: "",
                ticket_number: "",
            },
            formLabelWidth: '80px',
            rules: {
                spot_name: [
                    { required: true, message: '请输入种类', trigger: 'blur' },
                ],
                spot_site: [
                    { required: true, message: '请输入起点', trigger: 'blur' },
                ],
                spot_address: [
                    { required: true, message: '请输入终点', trigger: 'blur' },
                ],
                spot_level: [
                    { required: true, message: '请输入出发时间', trigger: 'blur' },
                ],
                spot_cityid: [
                    { required: true, message: '请输入到达时间', trigger: 'blur' },
                ],
                spot_time: [
                    { required: true, message: '请输入价格', trigger: 'blur' },
                ],
                spot_rates: [
                    { required: true, message: '请输入数量', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        async handleOk() {
            let res = await api.addTicket({ ...this.form })
            if (res?.code == 200) {
                this.$message({
                    message: res.message,
                    type: 'success'
                });
                this.$router.push('/layout/ticket/list')
            } else {
                this.$message.error(res.message);
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleOk();
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
    width: 340px;
}
</style>